<template>
    <div class="content">
        <el-form :inline="true" :model="queryForm" class="form-inline">
            <el-form-item label="店铺名称">
                <el-input v-model="queryForm.name" placeholder="请输入店铺名称" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="loadStoreList">查询</el-button>
            </el-form-item>
        </el-form>

        <div style="margin-bottom:10px;">
            <el-button type="primary" @click="handleSaveStore(null)">添加店铺</el-button>
        </div>

        <el-table :data="storeList" stripe>
            <el-table-column prop="storeName" label="店铺名称" />

            <el-table-column label="店铺图片">
                <template #default="scope">
                    <el-image style="height: 23px; border: none; cursor: pointer;vertical-align: top"
                        :src="scope.row.storeImg" />
                </template>
            </el-table-column>

            <el-table-column prop="storeScore" label="评分" width="100" />

            <el-table-column prop="storeSellNum" label="销量" width="100" />

            <el-table-column prop="workingTime" label="营业时间" width="100"></el-table-column>

            <el-table-column prop="storeCreateTime" label="创建时间" />

            <el-table-column prop="deliveryStartPay" label="起送费用" />

            <el-table-column prop="deliveryPay" label="配送费" />

            <el-table-column prop="storeDesc" label="描述" />



            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" style="margin-left: 2px;"
                        @click="handleSaveStore(scope.row.id)">编辑</el-button>

                    <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除
                    </el-button>

                </template>
            </el-table-column>

        </el-table>

        <div style="margin-top: 10px;">
            <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="queryForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handlePageChange" />
        </div>
    </div>

</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { getStoreList,deleteStore } from "@/api/store"
import { ElMessageBox, ElMessage } from "element-plus";


const router = useRouter();
const queryForm = reactive({
    name: "",
    page: 1,
    pageSize: 10
});


let storeList = reactive([]);
let total = ref(0);

let handleDelete = (storeId) => {
    //删除
  //确认对话框
  ElMessageBox.confirm(
      "确定删除?",
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteStore(storeId).then((resp) => {
        if(resp.code == 200){

        }
    });
  }).catch(()=>{
  })
}



let handleSaveStore = (storeId) => {
    //TODO 添加商铺
    console.log("handleSaveStore")
    if (storeId) {
        //编辑
        router.push({ path: '/store/save', query: { storeId: storeId } })
    } else {
        //添加
        router.push({ path: '/store/save' })
    }
    loadStoreList();
}

//定义方法
let loadStoreList = () => {

    let param = JSON.parse(JSON.stringify(queryForm));

    if (storeList.length != 0) {
        storeList = []
    }
    //准备数据
    getStoreList(param).then((resp) => {
        storeList.push(...resp.data);
        total.value = resp.total;
        //TODO 设置营业时间----星期一到星期五
    });
}

let handlePageChange = (page) => {
    //更改页码 执行的方法  
    queryForm.page = page;
    loadStoreList();
}

let handleSizeChange = (pageSize) => {
    //更改pageSize  执行的方法  
    queryForm.pageSize = pageSize;
    loadBookList()
}


loadStoreList()

</script>

<style scoped>
.form-inline .el-select {
    --el-select-width: 220px;
}
</style>